<template>
<transition name="el-zoom-in-bottom">
  <div v-show="showMemu.value" id="MemuRoot">
    <div v-for="i in ItemIcon" class="MemuItem">
      <Item :spin="i.spin" :Coloractive="i.active" :text="i.Text" :ICON="i.Icon" :activeIcon="i.activeIcon"
        :herf="i.herf">
      </Item>
    </div>
  </div>
</transition>
</template>

<script setup>
import { ref, computed, defineAsyncComponent, reactive, markRaw, watch,getCurrentInstance } from "vue";
import { useRouter } from "vue-router"
import Item from "./Item.vue"
import Home from "@/components/Public/MyIcon/Home.vue"

// 图标配置
import music from "@/components/Public/MyIcon/music.vue"
import musicA from '@/components/Public/MyIcon/musicnoA.vue'
import * as UI from '@element-plus/icons-vue'
let showMemu = reactive({value:true});
// 公共方法中转站
let global_Object = getCurrentInstance().appContext.config.globalProperties
const ItemIcon = reactive([
  // markRaw 是让内部的元素不会变为响应式对象的方法
  {
    Icon: markRaw(music),
    activeIcon: markRaw(musicA),
    Text: "音乐",
    active: false,
    // spin: true,
    herf: "/music",
  },
  {
    Icon: markRaw(Home),
    activeIcon: markRaw(UI.HomeFilled),
    Text: "主页",
    active: false,
    herf: "/",
    TopElement: markRaw( defineAsyncComponent(()=>{
      return import('@/views/HomeView/TopElement.vue')
    }))
  },

  {
    Icon: markRaw(UI.Setting),
    activeIcon: markRaw(false),
    Text: "设置",
    active: false,
    herf: "/Option",
    spin: true,
  
  }
])

// 这里的配置不要改,是动态元素量的执行函数
let grid_Item_Number = ""
for (let i = 0; i < ItemIcon.length; ++i) {
  grid_Item_Number += " 1fr"
}

defineExpose({
  ItemIcon,
  showMemu
})

// 如果path是 / 的时候让菜单栏无选择
const router = useRouter()      // 拿到路由
watch(router.currentRoute, (newValue) => {

  for (let k = 0; k < ItemIcon.length; ++k) {
    let MainPath = {}
    MainPath.path = "/" + newValue.path.split("/")[1]  //拿到路由的路径，这里的"/"是防止出现空字符串,以便兼容下方代码
    if (ItemIcon[k].herf == MainPath.path) {
      for (let i = 0; i < ItemIcon.length; ++i) {
        if (MainPath.path == ItemIcon[i].herf) {
          for (let i = 0; i < ItemIcon.length; ++i) {
            ItemIcon[i].active = false
          }
          ItemIcon[i].active = true;
          if( ItemIcon[i].TopElement != undefined ){
            global_Object.$setTopElement(ItemIcon[i].TopElement)
          }else{
            global_Object.$setTopElement()
          }
        }
      }
    }
  }
})

</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less" scoped>
#MemuRoot {
  height: 100%;
  display: grid;
  position: relative;
  grid-template-columns: v-bind(grid_Item_Number);
}
</style>
